<template>
  <section>
      <el-form :model="registerDetail" label-width="80px" v-loading="loading">
        <el-form-item label="姓名">
          <el-select clearable v-model="registerDetail.userId" :filterable="true" remote :reserve-keyword="false"
                     default-first-option  placeholder="请输入姓名"
                     :remote-method="remoteMethod"
                     size="mini">
            <el-option v-for="user in users" :key="user.id" :label="user.name" :value="user.id">
              <span style="float: left">{{ user.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ user.phone }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="科室">
          <el-select v-model="registerDetail.sectionId" placeholder="请选择科室"  size="mini">
            <el-option :label="section.name" :value="section.id" v-for="section in sections" :key="section.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="医生">
          <el-select v-model="registerDetail.doctorId" filterable placeholder="请选择" size="mini">
            <el-option v-for="doctor in doctors" :key="doctor.id" :label="doctor.name" :value="doctor.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="来源">
          <el-select v-model="registerDetail.sourceTypeCode" filterable placeholder="请选择" size="mini">
            <el-option v-for="sourceType in sourceTypes" :key="sourceType.id" :label="sourceType.name" :value="sourceType.code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item align="right" style="margin-right: 30px">
          <el-button type="success" @click="createRegisterBtn" size="mini" :disabled="check">确定</el-button>
          <el-button size="mini" >取消</el-button>
        </el-form-item>
      </el-form>
  </section>
</template>

<script>
  import { mapActions,mapGetters} from 'vuex'
  import DateFormat from '@/common/date-formater'
  import errHandler from '@/assets/errHandler.js'
  export default {
    name: "checkRegister",
    props: ['currAppointment'],
    data(){
      return{
        loading:false,
        users:[],
        sections:null,
        doctors:null,
        sourceTypes:null,
        registerDetail:{
          doctorId:'',
          sectionId:'',
          userId:'',
          sourceTypeCode:'',
          name:''
        }
      }
    },
    created(){
      this.init()
    },
    computed:{
      ...mapGetters(['department']),
      check(){
        let b
        for(let key in this.registerDetail){
          if(this.registerDetail[key] === ''){
            b = true
            console.log(b)
            return b
          }
        }
        b=false
        console.log(b)
        return b
      }
    },
    watch:{
      currAppointment(nv,ov){
        this.init()
      }
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      init(){
        if(this.currAppointment){
          this.registerDetail.userId = this.currAppointment.userId
          for(let key in this.currAppointment.data){
            if(this.judeg(key)){
              this.registerDetail.name += ''+this.currAppointment.data[key]+'-'
            }
          }
          this.remoteMethod(this.currAppointment.userName)
        }
        console.log('到这了么！')
        this.getHisSectionList()
        this.getUserList(5)
        this.getSourceTypeList()
      },
      judeg(key){
        let pattern = new RegExp("[\u4E00-\u9FA5]+");
        let str = key
        if(pattern.test(str)){
          return true
        }
      },
      remoteMethod(keyword) {
        this.loading=true
        this.fetch({name:"getUserList",data:{keyword}})
          .then(res=>{
            this.users=res
            this.loading = false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getSourceTypeList(){
        this.fetch({name:"getSourceTypeList"})
          .then(res=>{
            // console.log(res)
            this.sourceTypes=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getHisSectionList(){
        this.fetch({name:"getHisSectionList",data:{departmentId:this.department.id}})
          .then(res=>{
            console.log(res)
            this.sections=res
            if(this.currAppointment){
              this.registerDetail.sectionId = res.find(r=>r.name === this.currAppointment.data.科室).id
            }
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getUserList(groupId){
        this.fetch({name:"getUserList",data:{groupId}})
          .then(res=>{
            console.log(res)
            this.doctors=res
            if(this.currAppointment){
              this.registerDetail.doctorId = res.find(r=>r.name === this.currAppointment.data.医生).id
            }
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      createRegisterBtn(){
        this.loading = true
        console.log(this.registerDetail)
        let tmp={
          ...this.registerDetail,
          departmentId:this.department.id,
          time:DateFormat.formatime(new Date().getTime())>12?2:1,
          date:DateFormat.format(new Date().getTime())
        }
        tmp.data={
          appointmentId:this.currAppointment?this.currAppointment.id:'',
          department:this.department.name,
          doctor:this.doctors.find(d=>d.id === this.registerDetail.doctorId).name,
          section:this.sections.find(d=>d.id === this.registerDetail.sectionId).name,
          userName:this.users.find(d=>d.id === this.registerDetail.userId).name
        }
        this.createRegister(tmp)
      },
      createRegister(data){
        this.fetch({name:"createRegister",data:data})
          .then(res=>{
            this.loading = false
            console.log(res)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      }
    }
  }
</script>

<style scoped>

</style>
